<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>计算属性</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <div id="example">
   <p>暗语：{{ message }}</p> 
   <p>暗语反转：{{ now }}</p> 
  <button type="button" v-on:click="reverseMessage">反转</button>
  </div>
  <script type="text/javascript">
  var app = new Vue({
    el: "#example",
    data: {
      message: "赵兄托我帮你办点事"
    },
    computed:{
      reverseMessage1:function(){

        return this.message.split('').reverse().join('');
      },
      now:function(){

        return Date.now();
      }
    },
    methods:{

      reverseMessage:function(e){
        //return this.message.split('').reverse().join('');
        this.message = this.message.split('').reverse().join('');
      }
    }

  });
  </script>
</body>

</html>
